input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    -webkit-appearance: none;
}

label {
	font-weight: 700;
}

.form-control {
	box-shadow: none;
	font-size: @font-size-base;
	border: 1px solid transparent;
	background-color: @white-dark;
	&.focus,
	&:focus {
		box-shadow: none;
	}
	&.rounded {
		border-radius: 100px !important;
	}
}

.radio-custom,
.checkbox-custom,
.switch {
	position: relative;
	display: block;
	margin-top: 10px;
	margin-bottom: 10px;
	label {
		padding-left: 20px;
		margin-bottom: 0;
		font-weight: 400;
		cursor: pointer;
	}
}

.radio-custom + .radio-custom,
.checkbox-custom + .checkbox-custom,
.switch + .switch {
	margin-top: -5px;
}

input[type="radio"],
input[type="checkbox"] {
	&[disabled],
	&.disabled,
	fieldset[disabled] & {
		+ label {
			opacity: .6;
			cursor: not-allowed !important;
		}
	}
	&:focus {
		outline: 0;
	}
}

.radio-inline,
.checkbox-inline,
.switch-inline {
	padding-left: 0;
	display: inline-block;
	margin-top: 0;
	margin-bottom: 0;
}

.checkbox-custom {
	position: relative;
	input[type="checkbox"] {
		display: none !important;
		+ label {
			cursor: pointer;
			margin-bottom: 0;
			&:before {
				content: "";
				position: absolute;
				left: 0;
				top: 2px;
				width: 16px;
				height: 16px;
				border: 2px solid @divider-border-color;
				border-radius: 2px;
			}
			&:after {
				position: absolute;
				top: -1px;
				left: 2px;
				font-family: "Ionicons";
				content: "\f121";
				font-size: 14px;
				.transition(all .1s ease-in-out);
				.scale(0);
			}
			&.checkbox-success {
				.checkbox-variant(@brand-success);
			}
			&.checkbox-warning {
				.checkbox-variant(@brand-warning);
			}
			&.checkbox-error {
				.checkbox-variant(@brand-danger);
			}
		}
		&:checked + label {
			&:before {
				background-color: @divider-border-color;
			}
			&:after {
				.scale(1);
			}
			&.checkbox-success {
				.checkbox-variant-checked(@brand-success);
			}
			&.checkbox-warning {
				.checkbox-variant-checked(@brand-warning);
			}
			&.checkbox-error {
				.checkbox-variant-checked(@brand-danger);
			}
		}
	}
}
// Checkbox

.checkbox-variant(@border-color) {
	&:before {
		border-color: @border-color;
	}
	&:after {
		color: @white-base;

	}
}
.checkbox-variant-checked(@background) {
	&:before {
		background-color: @background;
	}
}

.radio-custom {
	position: relative;
	input[type="radio"] {
		display: none !important;
		+ label {
			cursor: pointer;
			margin-bottom: 0;
			&:before {
				content: "";
				position: absolute;
				left: 0;
				top: 2px;
				width: 16px;
				height: 16px;
				border: 2px solid @divider-border-color;
				border-radius: 50%;
			}
			&:after {
				content: '';
				position: absolute;
				width: 6px;
				height: 6px;
				background-color: @gray-dark;
				top: 7px;
				left: 5px;
				display: block;
				border-radius: 50%;
				.transition(all .1s ease-in-out);
				.scale(0);
			}
			&.radio-success {
				.radio-variant(@brand-success);
			}
			&.radio-warning {
				.radio-variant(@brand-warning);
			}
			&.radio-error {
				.radio-variant(@brand-danger);
			}
		}
		&:checked + label {
			&:before {
				background-color: @divider-border-color;
			}
			&:after {
				.scale(1);
			}
			&.radio-success {
				.radio-variant-checked(@brand-success);
			}
			&.radio-warning {
				.radio-variant-checked(@brand-warning);
			}
			&.radio-error {
				.radio-variant-checked(@brand-danger);
			}
		}
	}
}
// Radio button

.radio-variant(@border-color) {
	&:before {
		border-color: @border-color;
	}
	&:after {
		background-color: @white-base;
	}
}
.radio-variant-checked(@background) {
	&:before {
		background-color: @background;
	}
}

// Switch Button

.switch {
	position: relative;
	input[type="radio"],
	input[type="checkbox"] {
		display: none !important;
		+ label {
			cursor: pointer;
			margin-bottom: 0;
			height: 20px;
			width: 36px;
			&:before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 36px;
				height: 20px;
				border: 2px solid @divider-border-color;
				background-color: @white-base;
				border-radius: 50px;
			}
			&:after {
				content: "";
				position: absolute;
				top: 3px;
				left: 3px;
				margin-left: 0;
				width: 14px;
				height: 14px;
				background-color: @divider-border-color;
				border-radius: 50%;
				.transition(margin 0.05s);
			}
		}
		&:checked + label {
			&:after {
				margin-left: 16px;
			}
			&.switch-black {
				.switch-variant(@black-lighter);
			}
			&.switch-success {
				.switch-variant(@brand-success);
			}
			&.switch-warning {
				.switch-variant(@brand-warning);
			}
			&.switch-error {
				.switch-variant(@brand-danger);
			}
		}
	}
}

.switch-variant(@color) {
	&:before {
		border-color: @color;
	}
	&:after {
		background-color: @color;
	}
}

// Feedback icon

.form-control-feedback {
	line-height: 34px;
}


// Feedback states

.has-success {
	.form-control-validation(@brand-success; @brand-success; @bg-success);
}
.has-warning {
	.form-control-validation(@brand-warning; @brand-warning; @bg-warning);
}
.has-error {
	.form-control-validation(@brand-danger; @brand-danger; @bg-danger);
}

// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes.

.form-control-validation(@text-color; @border-color; @background-color) {
	.help-block,
	.control-label,
	.radio,
	.checkbox,
	.radio-custom,
	.checkbox-custom,
	.radio-inline,
	.checkbox-inline,
	&.radio label,
	&.checkbox label,
	&.radio-inline label,
	&.checkbox-inline label  {
		color: @text-color;
	}
	// Set the border and box shadow on specific inputs to match
	.form-control {
		border-color: transparent;
		box-shadow: none;
		background-color: @background-color;
		color: @white-base;
		&:focus {
			box-shadow: none;
			border-color: transparent;
		}
	}
	// Set validation states also for addons
	.input-group-addon {
		color: @white-base;
		border-color: transparent;
		background-color: @border-color;
	}
	// Optional feedback icon
	.form-control-feedback {
		color: @text-color;
	}
}

// Inline forms

.form-inline {
	@media (min-width:768px) {
		.radio-custom,
		.checkbox-custom,
		.switch {
			display: inline-block;
			margin-top: 0;
			margin-bottom: 0;
			vertical-align: middle;
		}
	}
}

// Horizontal forms

.form-horizontal {
	.radio-custom,
  	.checkbox-custom,
	.switch {
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 7px;
	}
	.radio-custom,
	.checkbox-custom,
	.switch {
		height: 27px;
	}
	.checkbox-custom {
		input[type="checkbox"] {
			+ label {
				&:before {
					top: 9px;
				}
				&:after {
					top: 7px;
				}
			}
		}
	}
	.radio-custom {
		input[type="radio"] {
			+ label {
				&:before {
					top: 9px;
				}
				&:after {
					top: 14px;
				}
			}
		}
	}
	.switch {
		input[type="radio"],
		input[type="checkbox"] {
			+ label {
				&:before {
					top: 7px;
				}
				&:after {
					top: 10px;
				}
			}
		}
	}
}